<template>
    <FrameWork></FrameWork>
    <ContentField>
        <h2 style="text-align:center;">系统默认删除题集</h2>
        <h2><router-link style="width:15%;" class="btn btn-sm btn-dark" :to="{name:'A_addDeleteSet', params: {proType: proType}}">添加题目</router-link></h2>
        <table class="table table-secondary table-hover" style="margin-top:5px;">
            <thead class="table-info text-center">
                    <tr>
                        <th scope="col">题号<br>(id)</th>
                        <th scope="col">题目描述<br>(content)</th>
                        <th scope="col">正确SQL语句<br>(correctSQL)</th>
                        <th scope="col">正确执行结果<br>(result)</th>
                        <th scope="col"></th>
                    </tr>
            </thead>
            <tbody class="text-center">
                <tr v-for="pro in pros" :key="pro.id">
                        <th>{{ pro.id }}</th>
                        <td>{{ pro.content }}</td>
                        <td>{{ pro.correctSQL }}</td>
                        <td v-if="pro.result.split(',').length < 5">{{ pro.result }}</td>
                        <td v-else>{{ pro.result.split(',').slice(0, 5).join(',') + ',...' }}</td>
                        <td>                        
                            <button class="btn btn-sm btn-primary" style=" margin-bottom: 5px;" @click="modifyInfo(pro.id)">修改</button>
                            <button class="btn btn-sm btn-danger" @click="deleteInfo(pro.id)">删除</button>
                        </td>
                </tr>
            </tbody>
        </table>
        <!-- 分页 -->
        <span aria-label="Page navigation example">
            <ul class="pagination" style="float:left">
                <li class="page-item disabled">
                    <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
                </li>
            </ul>

            <ul class="pagination" style="float:right">
                <li class='page-item'>
                    <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                    <a v-else class="page-link" @click="getPage( proType,prePage,pageSize )">上一页</a>
                </li>

                <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                    <a  class="page-link" @click="getPage(proType, item,pageSize)">{{ item }}</a>
                </li>
                <li class= 'page-item'>
                    <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                    <a  v-else class="page-link" @click="getPage(proType, nextPage,pageSize )">下一页</a>  
                </li>
            </ul>
        </span>

    </ContentField>
</template>

<script>

import FrameWork from '@/components/admin/FrameWork.vue';
import ContentField from '@/components/commons/ContentField.vue';
import {ref} from 'vue';
import $ from 'jquery';
import {useStore} from 'vuex';
import { useRoute } from 'vue-router';
import router from '@/router/index';

export default{
    name: 'A_querySet',
    components: {
        FrameWork,
        ContentField,
    },
    setup(){

        const store = useStore();
        const route = useRoute();

        let proType = route.params.proType;
        let pros = ref([]);

        let PageNum = 1;  //当前页数
        let PageSize = 4; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;


        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (proType,PageNum,PageSize)=>{   //按页查询用户信息

            // console.log("========");
            // console.log(proType);
            // console.log(PageNum);
            // console.log(PageSize);
            // console.log("========");

            $.ajax({
            url: 'http://localhost:8090/sls/defaultProSet/getPageInfoByProType/' +proType + '/' + PageNum +'/' + PageSize ,
            type: "get",
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                console.log(resp);

                pros.value = resp.list;  //获取所有题集信息

                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage;

                updatePageInfo(pageNum, pageSize);        
            },
            error(resp){
                console.log(resp);
            }
            });
        }

        getPage(proType, PageNum, PageSize);

        const deleteInfo = (id) => {
            $.ajax({
                url: "http://localhost:8090/sls/defaultProSet/deletePro",
                type: "post",
                data: {
                    id: id,
                },
                headers: {
                Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                  //console.log(resp);
                  if(resp.error_message === "success"){
                    //console.log(resp.error_message);
                  }else{
                    alert(resp.error_message);
                    //console.log(resp.error_message);
                  }
                },
                error(resp){
                    console.log(resp);
                 }
           });
           getPage(proType, PageNum, PageSize);
        }

        const modifyInfo = (id) => {
            router.push({name: 'A_modifyDeleteSet', params: {id:id} });
        }

    return{
           proType,
           pros,

           updatePageInfo,
           getPage,
           deleteInfo,
           modifyInfo,

           PageNum,
           PageSize,
           pageNum,
           pageSize,
           totalNum,
           totalPage,
           isFirstPage,
           isLastPage,
           nextPage,
           prePage,
    }
  }
}
</script>







